JavaScript testavimo įvaldymas: „Jest“ konfigūravimas ir individualizuotų atitikmenų kūrimas patikimoms programoms

Šiuolaikiniame greitai besivystančiame programinės įrangos pasaulyje, patikimos ir stabilios programos yra svarbiausia. Veiksmingas testavimas yra vienas iš tokių programų kūrimo pagrindų. „JavaScript“, būdama dominuojanti kalba tiek front-end, tiek back-end kūrimui, reikalauja galingo ir universalaus testavimo karkaso. „Jest“, sukurta „Facebook“, tapo lyderiaujančiu pasirinkimu, siūlančiu nulinės konfigūracijos diegimą, galingas imitavimo (mocking) galimybes ir puikų našumą. Šis išsamus vadovas gilinsis į „Jest“ konfigūracijos subtilybes ir nagrinės individualizuotų atitikmenų kūrimą, suteikdamas jums galimybę rašyti išraiškingesnius ir lengviau prižiūrimus testus, kurie užtikrina jūsų „JavaScript“ kodo kokybę ir patikimumą, nepriklausomai nuo jūsų buvimo vietos ar projekto masto.

Kodėl „Jest“? Pasaulinis „JavaScript“ testavimo standartas

Prieš gilinantis į konfigūraciją ir individualizuotus atitikmenis, supraskime, kodėl „Jest“ tapo pagrindiniu karkasu „JavaScript“ kūrėjams visame pasaulyje:

• Nulinė konfigūracija: „Jest“ pasižymi itin paprastu diegimu, leidžiančiu pradėti rašyti testus su minimalia konfigūracija. Tai ypač naudinga komandoms, taikančioms testais grįsto programavimo (TDD) ar elgsena grįsto programavimo (BDD) praktikas.
• Greitas ir efektyvus: „Jest“ lygiagretus testų vykdymas ir spartinimo mechanizmai prisideda prie greitų testavimo ciklų, suteikdami greitą grįžtamąjį ryšį kūrimo metu.
• Integruotas imitavimas (mocking): „Jest“ suteikia galingas imitavimo galimybes, leidžiančias izoliuoti kodo vienetus ir simuliuoti priklausomybes efektyviam vienetų testavimui.
• Momentinių nuotraukų testavimas: „Jest“ momentinių nuotraukų testavimo funkcija supaprastina vartotojo sąsajos komponentų ir duomenų struktūrų tikrinimo procesą, leidžiant lengvai aptikti netikėtus pokyčius.
• Puiki dokumentacija ir bendruomenės palaikymas: „Jest“ turi išsamią dokumentaciją ir aktyvią bendruomenę, todėl lengva rasti atsakymus ir gauti pagalbą, kai jos prireikia. Tai labai svarbu kūrėjams visame pasaulyje, dirbantiems įvairiose aplinkose.
• Platus pritaikymas: Įmonės visame pasaulyje, nuo startuolių iki didelių korporacijų, pasitiki „Jest“ testuodamos savo „JavaScript“ programas. Šis platus pritaikymas užtikrina nuolatinį tobulėjimą ir gausybę išteklių.

„Jest“ konfigūravimas: testavimo aplinkos pritaikymas

Nors „Jest“ siūlo nulinės konfigūracijos patirtį, dažnai reikia jį pritaikyti pagal konkrečius projekto poreikius. Pagrindinis „Jest“ konfigūravimo būdas yra `jest.config.js` failas (arba `jest.config.ts`, jei naudojate „TypeScript“) jūsų projekto šakninėje direktorijoje. Panagrinėkime keletą pagrindinių konfigūracijos parinkčių:

`transform`: jūsų kodo transpiliavimas

`transform` parinktis nurodo, kaip „Jest“ turėtų transformuoti jūsų pradinį kodą prieš paleidžiant testus. Tai labai svarbu dirbant su moderniomis „JavaScript“ funkcijomis, JSX, „TypeScript“ ar bet kokia kita nestandartine sintakse. Paprastai transpiliavimui naudosite „Babel“.

Pavyzdys (`jest.config.js`):

module.exports = {
  transform: {
    '^.+\.js$': 'babel-jest',
    '^.+\.jsx$': 'babel-jest',
    '^.+\.ts?$': 'ts-jest',
  },
};

Ši konfigūracija nurodo „Jest“ naudoti `babel-jest` transformuoti `.js` ir `.jsx` failus, ir `ts-jest` transformuoti `.ts` failus. Įsitikinkite, kad esate įdiegę reikiamus paketus (`npm install --save-dev babel-jest @babel/core @babel/preset-env ts-jest typescript`). Globalioms komandoms užtikrinkite, kad „Babel“ būtų sukonfigūruotas palaikyti atitinkamas ECMAScript versijas, naudojamas visuose regionuose.

`testEnvironment`: vykdymo konteksto imitavimas

`testEnvironment` parinktis nurodo aplinką, kurioje bus vykdomi jūsų testai. Dažniausios parinktys yra `node` (back-end kodui) ir `jsdom` (front-end kodui, kuris sąveikauja su DOM).

Pavyzdys (`jest.config.js`):

module.exports = {
  testEnvironment: 'jsdom',
};

Naudojant `jsdom` imituojama naršyklės aplinka, leidžianti testuoti „React“ komponentus ar kitą kodą, kuris priklauso nuo DOM. „Node.js“ pagrindu veikiančioms programoms ar back-end testavimui `node` yra tinkamiausias pasirinkimas. Dirbant su internacionalizuotomis programomis, įsitikinkite, kad `testEnvironment` teisingai imituoja lokalės nustatymus, susijusius su jūsų tikslinėmis auditorijomis.

`moduleNameMapper`: modulių importavimo sprendimas

`moduleNameMapper` parinktis leidžia susieti modulių pavadinimus su skirtingais keliais. Tai naudinga imituojant modulius, tvarkant absoliučius importus ar sprendžiant kelių aliasus.

Pavyzdys (`jest.config.js`):

module.exports = {
  moduleNameMapper: {
    '^@components/(.*)$': '/src/components/$1',
  },
};

Ši konfigūracija susieja importus, prasidedančius `@components/`, su `src/components` direktorija. Tai supaprastina importus ir pagerina kodo skaitomumą. Globaliuose projektuose absoliučių importų naudojimas gali pagerinti palaikymą skirtingose diegimo aplinkose ir komandų struktūrose.

`testMatch`: testų failų nurodymas

`testMatch` parinktis apibrėžia šablonus, naudojamus testų failams rasti. Pagal numatytuosius nustatymus „Jest“ ieško failų, kurių pavadinimai baigiasi `.test.js`, `.spec.js`, `.test.jsx`, `.spec.jsx`, `.test.ts` arba `.spec.ts`. Galite tai pritaikyti pagal savo projekto pavadinimų suteikimo taisykles.

Pavyzdys (`jest.config.js`):

module.exports = {
  testMatch: ['/src/**/*.test.js'],
};

Ši konfigūracija nurodo „Jest“ ieškoti testų failų, kurių pavadinimai baigiasi `.test.js`, `src` direktorijoje ir jos subdirektorijose. Nuoseklios testų failų pavadinimų suteikimo taisyklės yra labai svarbios palaikomumui, ypač didelėse, paskirstytose komandose.

`coverageDirectory`: aprėpties išvesties nurodymas

`coverageDirectory` parinktis nurodo direktoriją, kurioje „Jest“ turėtų išvesti kodo aprėpties ataskaitas. Kodo aprėpties analizė yra būtina norint užtikrinti, kad jūsų testai apimtų visas svarbias jūsų programos dalis ir padėtų nustatyti sritis, kuriose gali prireikti papildomo testavimo.

Pavyzdys (`jest.config.js`):

module.exports = {
  coverageDirectory: 'coverage',
};

Ši konfigūracija nurodo „Jest“ išvesti aprėpties ataskaitas į direktoriją, pavadintą `coverage`. Reguliarus kodo aprėpties ataskaitų peržiūrėjimas padeda pagerinti bendrą kodo bazės kokybę ir užtikrinti, kad testai tinkamai apima svarbiausias funkcijas. Tai ypač svarbu tarptautinėms programoms, siekiant užtikrinti nuoseklų funkcionalumą ir duomenų patvirtinimą skirtinguose regionuose.

`setupFilesAfterEnv`: parengiamojo kodo vykdymas

`setupFilesAfterEnv` parinktis nurodo failų masyvą, kuris turėtų būti įvykdytas po to, kai testavimo aplinka bus nustatyta. Tai naudinga nustatant imitacijas (mocks), konfigūruojant globalius kintamuosius ar pridedant individualizuotus atitikmenis. Tai yra įvesties taškas, kurį reikia naudoti apibrėžiant individualizuotus atitikmenis.

Pavyzdys (`jest.config.js`):

module.exports = {
  setupFilesAfterEnv: ['/src/setupTests.js'],
};

Tai nurodo „Jest“ įvykdyti kodą `src/setupTests.js` po to, kai aplinka bus nustatyta. Čia jūs registruotumėte savo individualizuotus atitikmenis, kuriuos aptarsime kitame skyriuje.

Kitos naudingos konfigūracijos parinktys

• `verbose`: Nurodo, ar konsolėje rodyti išsamius testų rezultatus.
• `collectCoverageFrom`: Apibrėžia, kurie failai turėtų būti įtraukti į kodo aprėpties ataskaitas.
• `moduleDirectories`: Nurodo papildomas direktorijas, kuriose ieškoti modulių.
• `clearMocks`: Automatiškai išvalo imitacijas (mocks) tarp testų vykdymų.
• `resetMocks`: Atstato imitacijas (mocks) prieš kiekvieną testų vykdymą.

Individualizuotų atitikmenų kūrimas: „Jest“ teiginių išplėtimas

„Jest“ suteikia platų integruotų atitikmenų rinkinį, tokių kaip `toBe`, `toEqual`, `toBeTruthy` ir `toBeFalsy`. Tačiau kartais reikia sukurti individualizuotus atitikmenis, kad teiginiai būtų išreikšti aiškiau ir glaustai, ypač dirbant su sudėtingomis duomenų struktūromis ar sričiai specifine logika. Individualizuoti atitikmenys pagerina kodo skaitomumą ir sumažina dubliavimą, todėl jūsų testai tampa lengviau suprantami ir prižiūrimi.

Individualizuoto atitikmens apibrėžimas

Individualizuoti atitikmenys apibrėžiami kaip funkcijos, kurios gauna `received` reikšmę (testuojamą reikšmę) ir grąžina objektą su dviem savybėmis: `pass` (loginė reikšmė, nurodanti, ar teiginys buvo sėkmingas) ir `message` (funkcija, kuri grąžina pranešimą, paaiškinantį, kodėl teiginys buvo sėkmingas ar nesėkmingas). Sukurkime individualizuotą atitikmenį, kuris patikrintų, ar skaičius yra tam tikrame diapazone.

Pavyzdys (`src/setupTests.js`):

expect.extend({
  toBeWithinRange(received, floor, ceiling) {
    const pass = received >= floor && received <= ceiling;
    if (pass) {
      return {
        message: () =>
          `expected ${received} not to be within range ${floor} - ${ceiling}`, 
        pass: true,
      };
    } else {
      return {
        message: () =>
          `expected ${received} to be within range ${floor} - ${ceiling}`,
        pass: false,
      };
    }
  },
});

Šiame pavyzdyje mes apibrėžiame individualizuotą atitikmenį pavadinimu `toBeWithinRange`, kuris priima tris argumentus: `received` reikšmę (testuojamą skaičių), `floor` (minimalią reikšmę) ir `ceiling` (maksimalią reikšmę). Atitikmuo patikrina, ar `received` reikšmė yra nurodytame diapazone ir grąžina objektą su `pass` ir `message` savybėmis.

Individualizuoto atitikmens naudojimas

Kai apibrėžėte individualizuotą atitikmenį, galite jį naudoti savo testuose kaip ir bet kurį kitą integruotą atitikmenį.

Pavyzdys (`src/myModule.test.js`):

import './setupTests'; // Ensure custom matchers are loaded

describe('toBeWithinRange', () => {
  it('passes when the number is within the range', () => {
    expect(5).toBeWithinRange(1, 10);
  });

  it('fails when the number is outside the range', () => {
    expect(0).not.toBeWithinRange(1, 10);
  });
});

Šis testų rinkinys parodo, kaip naudoti `toBeWithinRange` individualizuotą atitikmenį. Pirmasis testas teigia, kad skaičius 5 yra nuo 1 iki 10 diapazone, o antrasis testas teigia, kad skaičius 0 nėra tame pačiame diapazone.

Sudėtingesnių individualizuotų atitikmenų kūrimas

Individualizuoti atitikmenys gali būti naudojami testuoti sudėtingas duomenų struktūras ar sričiai specifinę logiką. Pavyzdžiui, sukurkime individualizuotą atitikmenį, kuris patikrintų, ar masyve yra konkretus elementas, nepriklausomai nuo raidžių dydžio.

Pavyzdys (`src/setupTests.js`):

expect.extend({
  toContainIgnoreCase(received, expected) {
    const pass = received.some(
      (item) => item.toLowerCase() === expected.toLowerCase()
    );
    if (pass) {
      return {
        message: () =>
          `expected ${received} not to contain ${expected} (case-insensitive)`, 
        pass: true,
      };
    } else {
      return {
        message: () =>
          `expected ${received} to contain ${expected} (case-insensitive)`, 
        pass: false,
      };
    }
  },
});

Šis atitikmuo iteruoja per `received` masyvą ir tikrina, ar kuris nors iš elementų, pavertus mažosiomis raidėmis, atitinka `expected` reikšmę (taip pat paverstą mažosiomis raidėmis). Tai leidžia atlikti nuo raidžių dydžio nepriklausomus teiginius masyvams.

Individualizuoti atitikmenys internacionalizacijos (i18n) testavimui

Kuriant internacionalizuotas programas, būtina patikrinti, ar teksto vertimai yra teisingi ir nuoseklūs skirtingose lokalėse. Individualizuoti atitikmenys gali būti neįkainojami šiam tikslui. Pavyzdžiui, galite sukurti individualizuotą atitikmenį, kuris patikrintų, ar lokalizuota eilutė atitinka konkretų šabloną ar turi tam tikrą raktažodį tam tikrai kalbai.

Pavyzdys (`src/setupTests.js` - pavyzdys daro prielaidą, kad turite funkciją, kuri verčia raktus):

import { translate } from './i18n';

expect.extend({
  toHaveTranslation(received, key, locale) {
    const translatedString = translate(key, locale);
    const pass = received.includes(translatedString);

    if (pass) {
      return {
        message: () => `expected ${received} not to contain translation for key ${key} in locale ${locale}`, 
        pass: true,
      };
    } else {
      return {
        message: () => `expected ${received} to contain translation for key ${key} in locale ${locale}`,
        pass: false,
      };
    }
  },
});

Pavyzdys (`src/i18n.js` - paprastas vertimo pavyzdys):

const translations = {
  en: {
    "welcome": "Welcome!"
  },
  fr: {
    "welcome": "Bienvenue!"
  }
}

export const translate = (key, locale) => {
  return translations[locale][key];
};

Dabar jūsų teste (`src/myComponent.test.js`):

import './setupTests';

it('should display translated greeting in french', () => {
    const greeting = "Bienvenue!";
    expect(greeting).toHaveTranslation("welcome", "fr");
});

Šis pavyzdys tikrina, ar `Bienvenue!` yra išversta „welcome“ reikšmė prancūzų kalba. Įsitikinkite, kad pritaikėte `translate` funkciją pagal savo konkrečią internacionalizacijos biblioteką ar metodą. Tinkamas i18n testavimas užtikrina, kad jūsų programos atitiktų vartotojų iš įvairių kultūrinių aplinkų lūkesčius.

Individualizuotų atitikmenų privalumai

• Pagerintas skaitomumas: Individualizuoti atitikmenys padaro jūsų testus išraiškingesnius ir lengviau suprantamus, ypač dirbant su sudėtingais teiginiais.
• Sumažintas dubliavimas: Individualizuoti atitikmenys leidžia pakartotinai naudoti bendrą teiginių logiką, mažinant kodo dubliavimą ir gerinant palaikomumą.
• Sričiai specifiniai teiginiai: Individualizuoti atitikmenys leidžia kurti teiginius, kurie yra specifiniai jūsų sričiai, todėl jūsų testai tampa aktualesni ir prasmingesni.
• Pagerintas bendradarbiavimas: Individualizuoti atitikmenys skatina nuoseklumą testavimo praktikose, todėl komandoms lengviau bendradarbiauti kuriant testų rinkinius.

Geriausios „Jest“ konfigūracijos ir individualizuotų atitikmenų praktikos

Norėdami maksimaliai išnaudoti „Jest“ konfigūracijos ir individualizuotų atitikmenų efektyvumą, apsvarstykite šias geriausias praktikas:

• Laikykite konfigūraciją paprastą: Venkite nereikalingos konfigūracijos. Kiek įmanoma, pasinaudokite „Jest“ nulinės konfigūracijos numatytosiomis reikšmėmis.
• Organizuokite testų failus: Laikykitės nuoseklios testų failų pavadinimų suteikimo tvarkos ir logiškai juos organizuokite savo projekto struktūroje.
• Rašykite aiškius ir glaustus individualizuotus atitikmenis: Užtikrinkite, kad jūsų individualizuoti atitikmenys būtų lengvai suprantami ir prižiūrimi. Pateikite naudingus klaidų pranešimus, kurie aiškiai paaiškina, kodėl teiginys nepavyko.
• Testuokite savo individualizuotus atitikmenis: Rašykite testus savo individualizuotiems atitikmenims, kad įsitikintumėte, jog jie veikia teisingai.
• Dokumentuokite savo individualizuotus atitikmenis: Pateikite aiškią dokumentaciją savo individualizuotiems atitikmenims, kad kiti kūrėjai suprastų, kaip juos naudoti.
• Laikykitės globalių kodavimo standartų: Laikykitės nustatytų kodavimo standartų ir geriausių praktikų, kad užtikrintumėte kodo kokybę ir palaikomumą visiems komandos nariams, nepriklausomai nuo jų buvimo vietos.
• Atsižvelkite į lokalizaciją testuose: Naudokite lokalėms specifinius testų duomenis arba kurkite individualizuotus atitikmenis i18n, kad tinkamai patvirtintumėte savo programas skirtingose kalbos nustatymuose.

Išvada: patikimų „JavaScript“ programų kūrimas su „Jest“

„Jest“ yra galingas ir universalus testavimo karkasas, kuris gali žymiai pagerinti jūsų „JavaScript“ programų kokybę ir patikimumą. Įvaldę „Jest“ konfigūraciją ir kurdami individualizuotus atitikmenis, galite pritaikyti savo testavimo aplinką pagal konkrečius projekto poreikius, rašyti išraiškingesnius ir lengviau prižiūrimus testus bei užtikrinti, kad jūsų kodas veiktų kaip tikėtasi įvairiose aplinkose ir vartotojų bazėse. Nesvarbu, ar kuriate mažą interneto programą, ar didelio masto įmonės sistemą, „Jest“ suteikia įrankius, kurių jums reikia norint kurti patikimą programinę įrangą pasaulinei auditorijai. Priimkite „Jest“ ir pakelkite savo „JavaScript“ testavimo praktikas į naujas aukštumas, būdami tikri, kad jūsų programa atitinka standartus, reikalingus patenkinti vartotojus visame pasaulyje.